<template>
	<view class="form-item">
		<view class="form-item__name" :class="{'disabled_name':disabled}">
			{{ name }}
			<text class="form-item__name-subname" v-if="subname">({{ subname }})</text>
		</view>
		<view class="form-item__value" v-if="disabled">
			<view class="form-item__value-input disabled_input">{{model}}</view>
		</view>
		<view class="form-item__value" v-else>
			<input
				class="form-item__value-input"
				v-model="model"
				:type="type"
				:disabled="disabled"
				:placeholder="placeholder"
				placeholder-class="form-item__value-input-placeholder"
				@input="change"
				@blur="$emit('blur')"
				@focus="$emit('focus')"
				@confirm="$emit('confirm')"
			/>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		name: String,
		subname: String,
		value: String | Number,
		placeholder: String,
		type: {
			type: String,
			default() {
				return 'text'
			}
		},
		disabled: {
			type: Boolean,
			default() {
				return false
			}
		}
	},
	data() {
		return {
			model: this.value
		};
	},
	methods: {
		change() {
			this.$emit('input', this.model);
			this.$emit('change', { value: this.model, oldValue: this.value });
		}
	}
};
</script>

<style></style>
